body{
    background-color: #F2E2C5;
}
#cabecera{
    height:250px;
    width:100%;
    background-color:#3062A4;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
#base{
    height:1850px;
    width:1024px;
    background-color:#8FA0D8;
    margin-left:auto;
    margin-right:auto;
}
#base2{
    height:2675px;
    width:1024px;
    background-color:#8FA0D8;
    margin-left:auto;
    margin-right:auto;
}
#pie{
    height:200px;
    width:100%;
    background-color:#3062A4;
}
#contracabecera{
    height:250px;
    width:1024px;
    background-color: #3062A4;
    margin-left:auto;
    margin-right:auto;
}
#contrapie{
    height:200px;
    width:1024px;
    background-color:#3062A4;
    margin-left:auto;
    margin-right:auto;
}
#logo{
    height:200px;
    width:200px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #3062A4;
}
#título{
    height:75px;
    width:700px;
    float:left;
    margin:25px;
    margin-right:37px;
    background-color: #FF7700;
    border-radius:15px;
}
#navegacion{
    height:75px;
    width:700px;
    float:left;
    margin:25px;
    margin-right: 37px;
    background-color: #3062A4;
    border-radius:15px;
}
#botón1{
    height:75px;
    width:350px;
    float:left;
    background-color:#FF7700;
    border-radius:15px;
}
#botón1:hover{
    background-color:#F2E2C5;
}
#botón2{
    height:75px;
    width:350px;
    float:right;
    background-color:#FF7700;
    border-radius:15px;
}
#botón2:hover{
    background-color:#F2E2C5;
}
#texto1{
    height:200px;
    width:550px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#img1{
    height:200px;
    width:350px;
    float:left;
    margin:25px;
    margin-right:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#img2{
    height:475px;
    width:450px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#texto2{
    height:475px;
    width:450px;
    float:left;
    margin:25px;
    margin-right:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#img3{
    height:500px;
    width:500px;
    float:left;
    margin:25px;
    margin-left:287px;
    margin-right: 287px;
    background-color: #F2E2C5;
    border-radius:15px;
}
#texto3{
    height:250px;
    width:950px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius:15px;
}
#texto3-1{
    height:250px;
    width:950px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius:15px;
}
#texto4{
    height:175px;
    width:950px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius:15px;
}
#texto4-1{
    height:150px;
    width:950px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius:15px;
}
#texto5{
    height:250px;
    width:550px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#texto6{
    height:350px;
    width:550px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#img4{
    height:250px;
    width:350px;
    float:left;
    margin:25px;
    margin-right:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#img5{
    height:350px;
    width:450px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#img6{
    height:350px;
    width:450px;
    float:left;
    margin:25px;
    margin-right:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#texto6{
    height:300px;
    width:950px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius:15px;
}
#img7{
    height:400px;
    width:700px;
    float:left;
    margin:25px;
    margin-left:162px;
    margin-right: 162px;
    background-color: #F2E2C5;
    border-radius:15px;
}
#img8{
    height:300px;
    width:450px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#texto7{
    height:300px;
    width:450px;
    float:left;
    margin:25px;
    margin-right:37px;
    background-color: #F2E2C5; 
    border-radius: 15px;
}
#copyright{
    height:150px;
    width:450px;
    float:left;
    margin:25px;
    margin-right:37px;
    background-color: #FF7700; 
    border-radius:15px;
}
#materia{
    height:150px;
    width:450px;
    float:left;
    margin:25px;
    margin-left:37px;
    background-color: #FF7700; 
    border-radius:15px;
}


.textonavegación{
    font-size:20px;
    Display: inline-block;
    Width:100%;
    height:100%;
    Text-decoration:none;
    Text-align:center;
    Line-height: 75px;
    color:black;
}
.logoitc{
    border-radius:135px;
}
.textofooter{
    font-size:20px;
    text-align:center;
    line-height:150px;
}
.textomateria{
    font-size:20px;
    text-align:center;
    line-height:50px;
}
.titulo{
    font-size:40px;
    line-height:5px;
    text-align:center;
    line-height: 75px;
}
.imagen1{
    height:200px;
    width:350px;
    border-radius: 15px; 
}
.textogeneral{
    font-size:20px;
    font-family:'Times New Roman', Times, serif;
    line-height: 25px;
    margin-left:15px;
    margin-right:15px;
    margin-top:15px;
    margin-bottom:15px;
    text-align: justify;
}
.imagen2{
    height:475px;
    width:450px;
    border-radius: 15px; 
}
.imagen3{
    height:500px;
    width:500px;
    border-radius:15px;
}
.imagen4{
    height:250px;
    width:350px;
    border-radius: 15px; 
}
.imagen5{
    height:350px;
    width:450px;
    border-radius: 15px; 
}
.imagen6{
    height:400px;
    width:700px;
    border-radius:15px;
}
.imagen7{
    height:300px;
    width:450px;
    border-radius: 15px; 
}
@media screen and (min-width: 768px) and (max-width: 1023px){ /*tablet*/

#cabecera{
    height:250px;
    width:100%;
}
#base{
    height:1575px;
    width:740px;
}
#base2{
    height:2850px;
    width:740px;
}
#pie{
    height:175px;
    width:100%;
}
#contracabecera{
    height:550px;
    width:720px;
}
#contrapie{
    height:175px;
    width:720px;
}
#logo{
    height:200px;
    width:200px;
    margin:25px;
    margin-left:25px;
    margin-right:25px;
}
#título{
    height:75px;
    width:470px;
    margin:0 auto;
    margin-top:25px;
}
#navegacion{
    height:75px;
    width:470px;
    margin:0 auto;
    margin-top:50px auto;
}
#botón1{
    height:75px;
    width:235px;
    margin:0 auto;
    margin-top:50px;
    margin-bottom:25px
}
#botón2{
    height:75px;
    width:235px;
    margin:0 auto;
    margin-top:50px;
    margin-bottom:25px
}
#texto1{
    height:275px;
    width:400px;
    margin:0 auto;
    margin:10px;
}
#img1{
    height:275px;
    width:300px;
    margin:0 auto;
    margin:10px;
}
#img2{
    height:525px;
    width:300px;
    margin:0 auto;
    margin:10px;
}
#texto2{
    height:525px;
    width:400px;
    margin:0 auto;
    margin:10px;
    margin-left:10px;
}
#img3{
    height:375px;
    width:300px;
    margin:0 auto;
    margin:10px;
}
#texto3{ 
    height:300px; 
    width:720px; 
    margin:0 auto; 
    margin:10px; 
}
#texto3-1{ 
    height:350px; 
    width:720px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto4{ 
    height:375px; 
    width:400px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto4-1{ 
    height:200px; 
    width:720px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto5{ 
    height:300px; 
    width:400px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto6{ 
    height:900px;
    width:400px;
    margin:10px auto; 
} 
#img4{ 
    height:300px; 
    width:300px; 
    margin:0 auto; 
    margin:10px; 
} 
#img5{ 
    height:350px; 
    width:350px; 
    margin:0 auto; 
    margin:10px; 
} 
#img6{ 
    height:350px; 
    width:350px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto6{ 
    height:375px; 
    width:720px; 
    margin:0 auto; 
    margin:10px; 
} 
#img7{ 
    height:500px; 
    width:720px; 
    margin:0 auto; 
    margin:10px; 
} 
#img8{ 
    height:300px;
    width:300px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto7{ 
    height:300px; 
    width:400px; 
    margin:0 auto; 
    margin:10px; 
} 
#copyright{ 
    height:150px; 
    width:340px; 
    margin:0 auto; 
    margin:10px; 
} 
#materia{ 
    height:150px; 
    width:340px; 
    margin:0 auto; 
    margin:10px; 
}
.textonavegación{
    font-size:20px;
    Display: inline-block;
    Width:100%;
    height:100%;
    Line-height: 75px;
}
.textofooter{
    font-size:20px;
    line-height:50px;
    text-align: center;
}
.textomateria{
    font-size:20px;
    line-height:50px;
    text-align: center;
}
.titulo{
    font-size:40px;
    line-height:5px;
    line-height: 75px;
}
.imagen1{
    height:275px;
    width:300px;
    border-radius: 15px; 
}
.textogeneral{
    line-height: 25px;
    margin-left:15px;
    margin-right:15px;
    margin-top:15px;
    margin-bottom:15px;
    text-align: justify;
}
.imagen2{
    height:525px;
    width:300px;
}
.imagen3{
    height:375px;
    width:300px;
}
.imagen4{
    height:300px;
    width:300px;
}
.imagen5{
    height:350px;
    width:350px;
}
.imagen6{
    height:500px;
    width:720px;
}
.imagen7{
    height:300px;
    width:300px;
}

}

@media screen and (min-width: 320px) and (max-width: 767px){

#cabecera{
    height:550px;
    width:100%;
}
#base{
    height:4450px;
    width:300px;
}
#base2{
    height:6900px;
    width:300px;
}
#pie{
    height:300px;
    width:100%;
}
#contracabecera{
    height:550px;
    width:300px;
}
#contrapie{
    height:300px;
    width:300px;
}
#logo{
    height:200px;
    width:200px;
    margin-top: auto;
    margin-bottom: auto;
}
#título{
    height:75px;
    width:280px;
    margin:10px;
}
#navegacion{
    height:190px;
    width:280px;
    margin:10px;
}
#botón1{
    height:75px;
    width:280px;
    margin:10px auto;
}
#botón2{
    height:75px;
    width:280px;
    margin:10px auto;

}
#texto1{
    height:475px;
    width:280px;
    margin:0 auto;
    margin:10px;
}
#img1{
    height:200px;
    width:280px;
    margin:0 auto;
    margin:10px;
}
#img2{
    height:475px;
    width:280px;
    margin:0 auto;
    margin:10px;
}
#texto2{
    height:1000px;
    width:280px;
    margin:0 auto;
    margin:10px;
}
#img3{
    height:500px;
    width:280px;
    margin:0 auto;
    margin:10px;
}
#texto3{ 
    height:1000px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
}
#texto3-1{ 
    height:1125px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto4{ 
    height:650px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto4-1{ 
    height:550px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto5{ 
    height:550px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto6{ 
    height:1200px;
    width:280px;
    margin:10px auto; 
} 
#img4{ 
    height:250px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#img5{ 
    height:350px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#img6{ 
    height:350px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto6{ 
    height:1300px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#img7{ 
    height:400px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#img8{ 
    height:250px;
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#texto7{ 
    height:550px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#copyright{ 
    height:100px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
} 
#materia{ 
    height:100px; 
    width:280px; 
    margin:0 auto; 
    margin:10px; 
}
.textonavegación{
    font-size:20px;
    Display: inline-block;
    Width:100%;
    height:100%;
    Line-height: 75px;
}
.textofooter{
    font-size:20px;
    line-height:33px;
    text-align: center;
}
.textomateria{
    font-size:20px;
    line-height:25px;
    text-align: center;
}
.titulo{
    font-size:40px;
    line-height:5px;
    line-height: 75px;
}
.imagen1{
    height:200px;
    width:280px;
    border-radius: 15px; 
}
.textogeneral{
    line-height: 25px;
    margin-left:15px;
    margin-right:15px;
    margin-top:15px;
    margin-bottom:15px;
    text-align: justify;
}
.imagen2{
    height:475px;
    width:280px;
}
.imagen3{
    height:500px;
    width:280px;
}
.imagen4{
    height:250px;
    width:280px;
}
.imagen5{
    height:350px;
    width:280px;
}
.imagen6{
    height:400px;
    width:280px;
}
.imagen7{
    height:250px;
    width:280px;
}

}